<template>

<div>
  <!-- 1、v-text 显示内置指令 -->
      <div v-text="msg"></div><br>

  <!-- 2、v-html 显示加粗的 这是......的页面 -->
      <div v-html="msg1"></div><br>

  <!-- 3、v-bind 显示一张图片 -->
      <div><img :src="img" height="200" v-show="showimg"></div>
      <!-- <div><img src="url"></div> -->
       
  <!-- 4、v-on 按钮 点击按钮替换图片2 -->
       <div><button @click="changeimg2" class="btn">点击更换图片</button></div>

  <!-- 5、v-model 姓名： input  以上是......完成的效果 -->    
       <div>
        <input type="text" v-model="zxy">
       </div>

  <!-- 6、v-if 点击按钮 姓名切换成姓名+学号 -->
       <div>
        <!-- 姓名：<input type="text" v-model="name" placeholder="姓名"> -->
        <!-- {{ name }} -->
        <button @click="nameid">姓名学号切换显示</button>
        <p v-if="showInfo"> {{name}}</p>
        <p v-else>{{ name }} 2430150138</p>
       </div>

  <!-- 7、v-show 点击按钮隐藏图片 -->
       <div>
        <button @click="hideimg">隐藏图片</button>
       </div>

  <!-- 8、v-for 序号：1 -- 指令是：v-text
              ......
              序号：8 -- 指令是：v-for -->
       <div v-for="item in list" :key="item.id">
        序号{{ item.id }}--指令是：{{ item.msg }}
       </div>
      
      
</div>

  
      
   
    
    
</template>

<script setup>
import { ref } from 'vue'
const msg  = "内置指令v-text"
const msg1 = '<b>这是v-html的页面</b>'
const img = ref('https://img04.sogoucdn.com/app/a/100520093/8379901cc65ba509-45c21ceb904429fc-1e16d8c0bc48a98cc6ba4e41d4b88a44.jpg')
// let url = new URL("../asstes.v-bind.png",import.meta.url).href
const zxy ='以上是周欣耀完成的效果'
const changeimg2 = () => {
  img.value = 'https://img04.sogoucdn.com/app/a/100520093/ae588be27ee085c4-fd668f66a830d70e-4acefdc9163e3ad357e44e9799bdc20f.jpg'
}
const name = ref('周欣耀')
const showInfo = ref(true);

const nameid = () => {
  showInfo.value = !showInfo.value;
};

const showimg = ref(true)
// const hideimg = () => {
//   showimg.value = !showimg.value
// }
function hideimg() {
  showimg.value = !showimg.value
}

// v-for 功能：指令列表
let list = [
    {id:1,msg:"v-text"},
    {id:2,msg:"v-html"},
    {id:3,msg:"v-bond"},
    {id:4,msg:"v-on"},
    {id:5,msg:"v-model"},
    {id:6,msg:"v-if"},
    {id:7,msg:"v-show"},
    {id:8,msg:"v-for"},
];
</script>

<style>
.btn{
  background-color: aqua;
}
</style>